<template>
	<view class="content">
		<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 22.684166,
				longitude: 114.080145,
			};
		},
		onReady() {
			this._mapContext = uni.createMapContext("map", this);
			// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
			this._mapContext.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
				  console.log('initMarkerCluster', res)
				}
			});
			this._mapContext.on("markerClusterCreate", (e) => {
				console.log("markerClusterCreate", e);
			});

			this.addMarkers();
		},
		methods:{
			addMarkers() {
				const positions = [
				  {
					latitude: this.latitude,
					longitude: this.longitude,
				  }
				]
				const markers = []
				positions.forEach((p, i) => {
				  markers.push(
					Object.assign({},{
					  id: i + 1,
					  width: 20,
					  height: 30,
					  joinCluster: true, // 指定了该参数才会参与聚合
					  label: {
						  width: 80,
						  height: 30,
						  borderWidth: 1,
						  borderRadius: 10,
						  bgColor: '#ffffff',
						  content: '淘屯厨具'
					  }
					},p)
				  )
				})
				this._mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
					  console.log('addMarkers', res)
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
  .map {
    width: 100vw;
	height: 100vh;
  }
</style>
